<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="/apply/css/pintuer.css">
    <link rel="stylesheet" href="/apply/css/admin.css">

    <script type="text/javascript" src="/apply/js/jquery-3.5.1.min.js"></script>


    <script type="text/javascript" src="/apply/js/vue.js"></script>
    <script type="text/javascript" src="/apply/js/approvecomponents.js"></script>

</head>
<body>
<div class="panel admin-panel" id="app">
    <div class="panel-head">
        <strong class="icon-reorder"> 考勤审批表</strong>
    </div>
    <div class="padding border-bottom">
        <form id="Formid">
            <button type="button" class="button border-green" id="checkall" @click="checkall">
                <span class="icon-check"></span> 全选
            </button>

            <button type="button" class="button border-red" @click="updateAll">
                <span class="icon-trash-o"></span> 批量审核
            </button>
        </form>
    </div>

    <div class="padding border-bottom">
        <form id="queryForm">
            <ul class="search" style="padding-left: 0px;">


                <li><select class="input" id="applyStatus" v-model="example.applyStatus"
                            style="width: 200px; line-height: 17px;">
                    <option :value=0>全部</option>
                    <option :value=1>已审核</option>
                    <option :value=2>未审核</option>
                    <option :value=3>已拒绝</option>
                </select></li>

            </ul>
        </form>
    </div>
    <page :url="url" :example="example" :columns="columns"></page>
</div>
</body>
<script type="text/javascript">
    var _this = this;
    var b = false;
    var nums = [];


    var app = new Vue({

        el: "#app",
        data: {
            example: {
                applyStatus:0,
                pageIndex: 1,
                num: 5
            },
            url: "/apply/apply/approve",
            columns: [

                {text: "序号", id: "applyId"},
                {text: "员工姓名", property: "applyEmpId"},
                {text: "申请时间", property: "applyDatetime"},
                {text: "请假开始时间", property: "applyStartTime"},
                {text: "请假结束时间", property: "applyEndTime"},
                {text: "请假事由", property: "applyType"},
                {text: "备注", property: "applyRemark"},
                {text: "申请状态", property: "applyStatus"},
            ]//定义分页组件内部表格中的列信息
        },

        methods: {
            checkall: function () {
                $(":checkbox[name=checkbox]").prop("checked", b = !b);
            },
            updateAll: function () {
                if (confirm("确认批量通过吗？")) {
                    $(".checkbox").each(function (id) {
                        if ($(this).prop("checked")) {
                            nums[nums.length] = $(this).parent().next().text();
                        }
                    });
                    if (nums.length != 0) {
                        $.ajax({
                            url: "/apply/apply/updateAll",
                            type: "post",
                            data: {nums: nums},
                            ContentType: "application/json;charset=UTF-8",
                            success: function (data) {
                                $(":checkbox[name=checkbox]").prop("checked", false);
                                _that.selectByExample();
                            },
                            error: function (error) {
                                alert("更新失败");
                            }

                        })
                    }
                }
            }
        }
    })
   function renderTime(date){
        var dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    }
</script>
</html>